<template>
  <div>
    <cusTable
      border
      :loading="loading"
      :columns="columns"
      :data="data"
      :bottomClass="['cus-page']"
    >
      <template slot-scope="{ row }" slot="operation">
        <div class="flex">
          <Button
            type="primary"
            size="small"
            :style="{ margin: '0 8px' }"
            @click="onShow(row)"
          >
            详情
          </Button>
        </div>
      </template>
    </cusTable>
    <div class="cus_page">
      <cus-page :data="pages" class="mt_20" @pageChange="getInformationPublishApi()"></cus-page>
    </div>
  </div>
</template>
      
<script>
import { getInformationPublish } from "@/api/organ/business";

export default {
  components: {},
  data() {
    return {
      loading: false,
      value: false,
      ruleValidate: {},
      data: [],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "伙食单位",
          key: "unitName",
          align: "center",
        },
        {
          title: "统计周期",
          key: "statisticalDate",
          align: "center",
        },
        {
          title: "提交时间",
          // key: "submitTime",
          sortable: true,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {},
                },
                new Date(params.row.submitTime).Format('yyyy-MM-dd')
              ),
            ]);
          },
        },
        // {
        //   title: "审核状态",
        //   key: "auditStatus",
        //   align: "center",
        //   render: (h, params) => {
        //     return h("div", [
        //       h(
        //         "span",
        //         {
        //           style: {
        //             padding: '5px',
        //             color: '#FFFFFF',
        //             background: params.row.auditStatus == 1 ? '#66CC33' : '#FF0033'
        //           },
        //         },
        //          // 审核状态:0 未提交;1:已提交
        //          params.row.auditStatus == 1 ? '已提交' : '未提交'
        //       ),
        //     ]);
        //   },
        // },
        {
          title: "提交状态",
          key: "submitStatus",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    padding: '5px',
                    color: '#FFFFFF',
                    background: params.row.submitStatus == 1 ? '#66CC33' : '#FF0033'
                  },
                },
                // 提交状态:0 未提交;1:已提交
                params.row.submitStatus == 1 ? '已提交' : '未提交'
              ),
            ]);
          },
        },
        {
          title: "备注",
          key: "remark",
          align: "center",
        },
        {
          title: "操作",
          width: 245,
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      tableHeight: 0,
    };
  },
  props: {
    form: {
      type: Object,
      default: () => {}
    },
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 325; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
    this.onInit()
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    onInit() {
      this.pages.page = 1;
      this.getInformationPublishApi();
    },
    onShow(row) {
      this.$router.push({
        // 食物定量分析图
        name: "食物定量分析图",
        query: {
          id: row.id
        }
      });
    },

    // 列表接口---------------------------接口
    getInformationPublishApi() {
      this.loading = true;
      return new Promise((resolve) => {
        getInformationPublish({
          // auditStatus: this.form.organAuditState,      // 审核状态:0 未审核;1:已审核
          submitStatus: this.form.submitStatus, //提交状态
          statisticalDate: new Date(this.form.statisticalDate).Format('yyyy-MM'), // 统计日期
          unitCode: this.form.unitCode, // 伙食单位
          type: 5, // 录入数据的类型:(1:重点食材;2:价格指数波动;4:年伙食费开支5:食物消耗;7:营养达标)
          currentPage: this.pages.page,
          pageSize: this.pages.pageSize,
        }).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.data = res.data.list; 
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 365; // 表格自适应高度
      }, 100);
    },
  },
  component: {},
};
</script>
    <style lang="less" scoped>
.content-top {
  padding: 24px 0 0 24px;
}
::v-deep .ivu-table-wrapper-with-border {
  border-radius: 6px;
}
</style>